<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>资源合作</title>
		<script type="text/javascript" src="../jquery.js"></script>
		<script src="../ui/om-core.js"></script>
		<script src="../ui/om-mouse.js"></script>
		<script src="../ui/om-resizable.js"></script>
		<script type="text/javascript" src="../ui/om-grid.js"></script>
		<script type="text/javascript" src="../ui/om-grid-sort.js"></script>
    	<script type="text/javascript" src="../ui/om-validate.js"></script>
    	<script src="../ui/om-messagetip.js"></script>
		<link rel="stylesheet" type="text/css"
			href="../themes/default/om-all.css" />
		<link rel="stylesheet" type="text/css"
			href="../themes/default/om-grid-sort.css" />
		<link rel="stylesheet" type="text/css"
			href="../demos/common/css/demo.css" />
		<link href="../images/skin.css" rel="stylesheet" type="text/css" />
		<script src="../ui/om-draggable.js"></script>
		<script src="../ui/om-position.js"></script>
		<script src="../ui/om-dialog.js"></script>
		<script type="text/javascript">
        $(document).ready(function() {
            $('#grid').omGrid({
                height:480,
                title:'资源合作类别',
                dataSource : '../product.do',
                colModel : [ 
                            {header : '类别', name : 'categoryName', width :'autoExpand', align : 'left',sort:'clientSide'}]
            });
            var dialog = $("#dialog-modal").omDialog({
                width: 350,
                autoOpen : false,
                modal : true,
                resizable : false,
                buttons : {
                    "提交" : function(){
		                submitDialog();
		                return false; //阻止form的默认提交动作
		            },
                    "取消" : function() {
                        $("#dialog-modal").omDialog("close");//关闭dialog
                    }
                }
            });
            
            //显示dialog并初始化里面的输入框的数据
            var showDialog = function(title,rowData){
                rowData = rowData || {};
                $("input[name='id']",dialog).val(rowData.id);
                $("input[name='categoryName']",dialog).val(rowData.categoryName);
                dialog.omDialog("option", "title", title);
                dialog.omDialog("open");//显示dialog
            };
            
            //dialog中点提交按钮时将数据提交到后台并执行相应的add或modify操作
            var submitDialog = function(){
                if (validator.form()) {
	                var submitData={
	                    operation:isAdd?'add':'modify',
	                    id:$("input[name='id']",dialog).val(),
	                    name:$("input[name='categoryName']",dialog).val()
	                };
	                
	                    if(isAdd){
	                    	$.post('',submitData,function(){
		                        $('#grid').omGrid('reload',1);//如果是添加则滚动到第一页并刷新
		                        $.omMessageTip.show({title: "操作成功", content: "添加类别成功", timeout: 3000});
	                        });
	                    }else{
	                    	$.post('',submitData,function(){
		                        $('#grid').omGrid('reload');//如果是修改则刷新当前页
		                        $.omMessageTip.show({title: "操作成功", content: "修改类别成功", timeout: 3000});
	                        });
	                    }
	                    dialog.omDialog("close"); //关闭dialog
                }
            };
            
            var isAdd = true; //弹出窗口中是添加操作还是修改操作？
            $('#create').bind('click', function() {
                isAdd = true;
                validator.resetForm();
                showDialog('新增类别');//显示dialog
            });
            $('#modify').bind('click', function() {
                var selections=$('#grid').omGrid('getSelections',true);
                if (selections.length == 0) {
                    alert('请至少选择一行记录');
                    return false;
                }
                isAdd = false;
                showDialog('修改类别',selections[0]);//显示dialog
            });

            $('#delete').bind('click', function(e) {
                var selections=$('#grid').omGrid('getSelections',true);
                if (selections.length == 0) {
                    alert('请至少选择一行记录');
                    return false;
                }
                //将选择的记录的id传递到后台去并执行delete操作
                var toDeleteRecordID=selections[0].id;
                $.post('',{operation:'delete',id:toDeleteRecordID},function(){
                    $('#grid').omGrid('reload');//刷新当前页数据
                    $.omMessageTip.show({title: "操作成功", content: "删除类别成功", timeout: 1500});
                });
            });
            
        	//对表单进行校验
            var validator = $('#userForm').validate({
                rules : {
                    categoryName : {required: true}
                }, 
                messages : {
                    categoryName : {required : "名称不能为空"}
                }
            });
            
        });
    </script>
		<style>
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #EEF2FB;
}
</style>
	</head>
	<body>
	
		<div style="width:100%;">
		<table width="100%" border="0" cellpadding="0" cellspacing="0">
			<tr>
				<td width="17" valign="top" background="../images/mail_leftbg.gif">
					<img src="../images/left-top-right.gif" width="17" height="29" />
				</td>
				<td valign="top" background="../images/content-bg.gif">
					<table width="100%" height="31" border="0" cellpadding="0"
						cellspacing="0" class="left_topbg" id="table2">
						<tr>
							<td height="31">
								<div class="titlebt"></div>
							</td>
						</tr>
					</table>
				</td>
				<td width="16" valign="top" background="../images/mail_rightbg.gif">
					<img src="../images/nav-right-bg.gif" width="16" height="29" />
				</td>
			</tr>
			<tr width="100%">
				<td valign="middle" background="../images/mail_leftbg.gif">
					&nbsp;
				</td>
				<td valign="top" bgcolor="#F7F8F9">
					<div id="operation" style="text-align:center;background-color:#66ccff;">
						<input id="create" type="button" value="新增" />
						<input id="modify" type="button" value="修改" />
						<input id="delete" type="button" value="删除" />
					</div>
					<div id="dialog-modal" title="新增">
						<form id="userForm">
							<input name="id" style="display: none" />
							<table>
								<tr>
									<td>
										类别名称：
									</td>
									<td>
										<input id="categoryName" name="categoryName" />
									</td>
								</tr>
							</table>
						</form>
					</div>
					<div style="padding: 0px 0px;">
						<table id="grid"></table>

					</div>
				</td>
				<td background="../images/mail_rightbg.gif">
					&nbsp;
				</td>
			</tr>
			<tr>
				<td valign="bottom" background="../images/mail_leftbg.gif">
					<img src="../images/buttom_left2.gif" width="17" height="17" />
				</td>
				<td background="../images/buttom_bgs.gif">
					<img src="../images/buttom_bgs.gif" width="17" height="17">
				</td>
				<td valign="bottom" background="../images/mail_rightbg.gif">
					<img src="../images/buttom_right2.gif" width="16" height="17" />
				</td>
			</tr>
		</table>
		</div>
	</body>
</html>